<template>
    <div class="learningRecordView">
        <div class="title">
            <div class="screen">
                <span class="screenText">筛选</span>
                <div class="filter">
                    <div class="filterItem" v-for="(item, index) in filterOptions" :key="index">
                        <label>
                            <input type="radio" :value="item.value" name="recordType" v-model="recordFilter"
                                @change="getFilterRecords" />
                            <span>{{ item.label }}</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="buttons">
                <div class="button" @click="refreshRecords">
                    <span class="iconfont icon-likesprogramrili"></span>
                    刷新记录
                </div>
            </div>
        </div>

        <div class="content">
            <div class="recordList" v-if="recordList.length > 0">
                <div class="record-item" v-for="record in recordList" :key="record.record_id">
                    <div class="record-header">
                        <div class="course-info">
                            <img :src="record.course_pic" alt="课程封面" class="course-cover">
                            <div class="course-details">
                                <h3 class="course-name">{{ record.course_name }}</h3>
                                <p class="chapter-name">{{ record.chapter_name }}</p>
                            </div>
                        </div>
                        <div class="record-time">
                            <p>上次学习时间: {{ formatDate(record.last_browse_time) }}</p>
                            <p>学习进度: {{ record.browse_percent }}%</p>
                            <div class="progress-bar">
                                <div class="progress" :style="{ width: record.browse_percent + '%' }"></div>
                            </div>
                        </div>
                        <div class="record-buttons">
                            <div class="button continue-btn"
                                @click="continueLearning(record.record_id, record.course_id)">
                                <span class="iconfont icon-likesprograma-shangyibu1"></span>
                                继续学习
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="empty" v-else>暂&nbsp;&nbsp;无&nbsp;&nbsp;学&nbsp;&nbsp;习&nbsp;&nbsp;记&nbsp;&nbsp;录</div>

            <!-- 分页 -->
            <div class="pagination" v-if="recordList.length > 0">
                <div class="pagination-info">
                    共 {{ total }} 条记录，当前第 {{ currentPage }}/{{ Math.ceil(total / pageSize) }} 页
                </div>
                <div class="pagination-buttons">
                    <button @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">上一页</button>
                    <button @click="changePage(currentPage + 1)"
                        :disabled="currentPage >= Math.ceil(total / pageSize)">下一页</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'learningRecordView',
}
</script>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 学习记录数据结构
interface UserCourseLog {
    record_id: number;        // 记录ID
    user_id: number;          // 用户ID 
    course_id: number;        // 课程ID
    chapter_id: number;       // 章节ID
    first_browse_time: string; // 首次浏览时间
    last_browse_time: string;  // 最后浏览时间
    browse_count: number;     // 浏览次数
    browse_percent: number;   // 浏览进度百分比
    course_name: string;     // 课程名称
    chapter_name: string;    // 章节名称
    course_pic: string;      // 课程封面
}

// 过滤选项
const filterOptions = [
    { label: '全部记录', value: 'all' },
    { label: '最近学习', value: 'recent' },
    { label: '完成课程', value: 'completed' }
];

// 记录过滤条件
const recordFilter = ref('all');

// 模拟学习记录数据
const allRecords = ref<UserCourseLog[]>([
    {
        record_id: 1,
        user_id: 101,
        course_id: 201,
        chapter_id: 301,
        first_browse_time: '2023-09-01T10:00:00',
        last_browse_time: '2023-09-20T15:30:00',
        browse_count: 12,
        browse_percent: 75,
        course_name: '前端开发进阶',
        chapter_name: 'Vue3核心原理解析',
        course_pic: 'https://picsum.photos/id/180/600/300'
    },
    {
        record_id: 2,
        user_id: 101,
        course_id: 202,
        chapter_id: 302,
        first_browse_time: '2023-08-15T09:15:00',
        last_browse_time: '2023-09-18T14:45:00',
        browse_count: 8,
        browse_percent: 60,
        course_name: 'React高级教程',
        chapter_name: '状态管理与Redux',
        course_pic: 'https://picsum.photos/id/160/600/300'
    },
    {
        record_id: 3,
        user_id: 101,
        course_id: 203,
        chapter_id: 303,
        first_browse_time: '2023-07-20T13:20:00',
        last_browse_time: '2023-09-15T16:10:00',
        browse_count: 15,
        browse_percent: 100,
        course_name: 'TypeScript实战指南',
        chapter_name: '高级类型和类型体操',
        course_pic: 'https://picsum.photos/id/16/600/300'
    },
    {
        record_id: 4,
        user_id: 101,
        course_id: 204,
        chapter_id: 304,
        first_browse_time: '2023-09-05T11:30:00',
        last_browse_time: '2023-09-10T10:15:00',
        browse_count: 4,
        browse_percent: 25,
        course_name: 'Node.js后端开发',
        chapter_name: 'Express框架入门',
        course_pic: 'https://picsum.photos/id/43/600/300'
    },
    {
        record_id: 5,
        user_id: 101,
        course_id: 205,
        chapter_id: 305,
        first_browse_time: '2023-09-12T14:00:00',
        last_browse_time: '2023-09-19T09:45:00',
        browse_count: 7,
        browse_percent: 45,
        course_name: '数据结构与算法',
        chapter_name: '动态规划详解',
        course_pic: 'https://picsum.photos/id/26/600/300'
    },
    {
        record_id: 6,
        user_id: 101,
        course_id: 206,
        chapter_id: 306,
        first_browse_time: '2023-08-01T08:45:00',
        last_browse_time: '2023-09-01T16:30:00',
        browse_count: 20,
        browse_percent: 100,
        course_name: 'Python数据分析',
        chapter_name: 'Pandas高级应用',
        course_pic: 'https://picsum.photos/id/91/600/300'
    }
]);

// 学习记录列表 - 当前显示
const recordList = ref<UserCourseLog[]>([]);

// 分页参数
const currentPage = ref(1);
const pageSize = ref(4);
const total = ref(0);

// 格式化日期
const formatDate = (dateStr: string) => {
    if (!dateStr) return '未知时间';
    const date = new Date(dateStr);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 加载学习记录
const loadRecords = (page: number = 1, size: number = 4, filter: string = 'all') => {
    let filtered: UserCourseLog[] = [];

    // 根据筛选条件过滤数据
    if (filter === 'all') {
        filtered = [...allRecords.value];
    } else if (filter === 'recent') {
        // 按最后学习时间降序排序，取最新的
        filtered = [...allRecords.value].sort((a, b) =>
            new Date(b.last_browse_time).getTime() - new Date(a.last_browse_time).getTime()
        );
    } else if (filter === 'completed') {
        // 只显示已完成的课程
        filtered = allRecords.value.filter(record => record.browse_percent === 100);
    }

    // 分页处理
    total.value = filtered.length;
    const start = (page - 1) * size;
    const end = Math.min(start + size, filtered.length);
    recordList.value = filtered.slice(start, end);
};

// 根据筛选条件获取记录
const getFilterRecords = () => {
    currentPage.value = 1;
    loadRecords(currentPage.value, pageSize.value, recordFilter.value);
};

// 刷新记录
const refreshRecords = () => {
    loadRecords(currentPage.value, pageSize.value, recordFilter.value);
};

// 分页变化
const changePage = (page: number) => {
    if (page < 1 || page > Math.ceil(total.value / pageSize.value)) return;
    currentPage.value = page;
    loadRecords(currentPage.value, pageSize.value, recordFilter.value);
};

// 继续学习
const continueLearning = (_, courseId: number) => {
    router.push(`/course/courseDetails/${courseId}`);
};

// 生命周期钩子 - 组件挂载完成后加载数据
onMounted(() => {
    loadRecords();
});
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.learningRecordView {
    width: 100%;
    height: 100%;
}

.learningRecordView .title {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 筛选 */
.learningRecordView .title .screen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.learningRecordView .title .screen .screenText {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding-right: 15px;
    color: rgba(100, 100, 100, 1);
}

.learningRecordView .title .screen .filter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.learningRecordView .title .screen .filter .filterItem {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 筛选项 */
.learningRecordView .title .screen .filter .filterItem label {
    padding: 0px 15px;
    width: 100%;
    height: 35px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.learningRecordView .title .screen .filter .filterItem label input {
    width: 10px;
    height: 10px;
}

.learningRecordView .title .screen .filter .filterItem label input:before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 8px;
    font-weight: bold;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 1);
    outline: 2px solid rgba(180, 180, 180, 1);
}

.learningRecordView .title .screen .filter .filterItem label input:checked:before {
    content: "\2713";
    color: rgba(77, 83, 232, 1);
    outline: 2px solid rgba(77, 83, 232, 1);
}

.learningRecordView .title .screen .filter .filterItem label span {
    padding-left: 6px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 按钮 */
.learningRecordView .title .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.learningRecordView .title .buttons .button {
    padding: 5px 10px;
    font-size: 14px;
    display: flex;
    margin-left: 15px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: rgba(77, 83, 232, 1);
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
}

.learningRecordView .title .buttons .button .iconfont {
    margin-right: 5px;
    font-size: 18px;
}

.learningRecordView .title .buttons .button:hover {
    background-color: rgba(77, 83, 232, .8);
}

.learningRecordView .title .buttons .button:active {
    background-color: rgba(77, 83, 232, 1);
    color: rgba(255, 255, 255, .8);
    transition: .1s all;
}

/* 内容 */
.learningRecordView .content {
    width: 100%;
    height: calc(100% - 40px);
}

.learningRecordView .content .recordList,
.learningRecordView .content .empty {
    width: 100%;
    margin: 10px 0px;
    height: calc(100% - 52px);
}

.learningRecordView .content .recordList {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.record-item {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.record-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 2;
}

.course-cover {
    width: 120px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
}

.course-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.chapter-name {
    font-size: 14px;
    color: #666;
}

.record-time {
    font-size: 14px;
    color: #666;
    text-align: right;
    flex: 1;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: #eee;
    border-radius: 3px;
    margin-top: 5px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background-color: rgba(77, 83, 232, 1);
    border-radius: 3px;
}

.record-buttons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.continue-btn {
    padding: 5px 10px;
    border-radius: 5px;
    background: rgba(77, 83, 232, 1);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.continue-btn .iconfont {
    margin-right: 5px;
    font-size: 18px;
}

.continue-btn:hover {
    background-color: rgba(77, 83, 232, .8);
}

.continue-btn:active {
    background-color: rgba(77, 83, 232, 1);
    color: rgba(255, 255, 255, .8);
    transition: .1s all;
}

.learningRecordView .content .empty {
    font-size: 32px;
    font-weight: bold;
    font-family: "artisticFonts";
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(180, 180, 180, 1);
}

/* 分页 */
.learningRecordView .content .pagination {
    width: 100%;
    height: 32px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-info {
    font-size: 14px;
    color: #666;
}

.pagination-buttons {
    display: flex;
    gap: 10px;
}

.pagination-buttons button {
    padding: 5px 15px;
    border: 1px solid #dcdfe6;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.pagination-buttons button:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.pagination-buttons button:hover:not(:disabled) {
    background-color: #f2f6fc;
}

@media screen and (max-width: 768px) {
    .record-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .course-info {
        width: 100%;
    }

    .record-time {
        width: 100%;
        text-align: left;
    }

    .record-buttons {
        width: 100%;
        justify-content: flex-start;
    }
}
</style>